<template>
  <view class="fu-textarea">
    <textarea
      class="fu-textarea__inner"
      :class="{ 'fu-textarea__inner--border': border }"
      :value="modelValue"
      :placeholder="placeholder"
      :placeholder-style="placeholderStyle"
      :disabled="disabled"
      :maxlength="maxlength"
      :focus="focus"
      :auto-height="autoHeight"
      :fixed="fixed"
      :cursor-spacing="cursorSpacing"
      :show-confirm-bar="showConfirmBar"
      :selection-start="selectionStart"
      :selection-end="selectionEnd"
      :adjust-position="adjustPosition"
      :hold-keyboard="holdKeyboard"
      :disable-default-padding="disableDefaultPadding"
      @input="onInput"
      @focus="onFocus"
      @blur="onBlur"
      @confirm="onConfirm"
      @linechange="onLineChange"
      @keyboardheightchange="onKeyboardHeightChange"
    />
    
    <!-- 字数统计 -->
    <view 
      v-if="showWordLimit && maxlength > 0"
      class="fu-textarea__limit"
    >
      {{ modelValue.length }}/{{ maxlength }}
    </view>
  </view>
</template>

<script>
/**
 * fu-textarea 文本域组件
 * @description 文本域组件，支持自适应高度等特性
 * @property {String} modelValue - 输入内容
 * @property {String} placeholder - 占位文本
 * @property {String} placeholderStyle - 占位文本样式
 * @property {Boolean} disabled - 是否禁用
 * @property {Number} maxlength - 最大输入长度，-1表示不限制
 * @property {Boolean} focus - 是否自动聚焦
 * @property {Boolean} autoHeight - 是否自动增高
 * @property {Boolean} fixed - 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
 * @property {Number} cursorSpacing - 指定光标与键盘的距离
 * @property {Boolean} showConfirmBar - 是否显示键盘上方带有"完成"按钮那一栏
 * @property {Number} selectionStart - 光标起始位置
 * @property {Number} selectionEnd - 光标结束位置
 * @property {Boolean} adjustPosition - 键盘弹起时，是否自动上推页面
 * @property {Boolean} holdKeyboard - focus时，点击页面的时候不收起键盘
 * @property {Boolean} disableDefaultPadding - 是否去掉 iOS 下的默认内边距
 * @property {Boolean} showWordLimit - 是否显示字数统计
 * @property {Boolean} border - 是否显示边框
 * @event {Function} update:modelValue - 输入内容更新时触发
 * @event {Function} focus - 输入框聚焦时触发
 * @event {Function} blur - 输入框失焦时触发
 * @event {Function} confirm - 点击完成时触发
 * @event {Function} linechange - 输入框行数变化时触发
 * @event {Function} keyboardheightchange - 键盘高度变化时触发
 */
export default {
  name: 'fu-textarea',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    placeholderStyle: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: Number,
      default: -1
    },
    focus: {
      type: Boolean,
      default: false
    },
    autoHeight: {
      type: Boolean,
      default: false
    },
    fixed: {
      type: Boolean,
      default: false
    },
    cursorSpacing: {
      type: Number,
      default: 0
    },
    showConfirmBar: {
      type: Boolean,
      default: true
    },
    selectionStart: {
      type: Number,
      default: -1
    },
    selectionEnd: {
      type: Number,
      default: -1
    },
    adjustPosition: {
      type: Boolean,
      default: true
    },
    holdKeyboard: {
      type: Boolean,
      default: false
    },
    disableDefaultPadding: {
      type: Boolean,
      default: false
    },
    showWordLimit: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:modelValue', 'focus', 'blur', 'confirm', 'linechange', 'keyboardheightchange'],
  methods: {
    onInput(event) {
      const { value = '' } = event.detail
      this.$emit('update:modelValue', value)
    },
    onFocus(event) {
      this.$emit('focus', event)
    },
    onBlur(event) {
      this.$emit('blur', event)
    },
    onConfirm(event) {
      this.$emit('confirm', event)
    },
    onLineChange(event) {
      this.$emit('linechange', event)
    },
    onKeyboardHeightChange(event) {
      this.$emit('keyboardheightchange', event)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-textarea {
  position: relative;
  width: 100%;
  
  &__inner {
    width: 100%;
    min-height: 200rpx;
    padding: 24rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    line-height: 1.5;
    color: var(--fu-text-color);
    background-color: #fff;
    border-radius: var(--fu-radius-base);
    
    &--border {
      border: 2rpx solid var(--fu-border-color);
    }
    
    &::placeholder {
      color: var(--fu-text-color-secondary);
    }
    
    &[disabled] {
      background-color: #f5f7fa;
      cursor: not-allowed;
      opacity: 1;
      &.fu-textarea__inner--border {
        border-color: var(--fu-border-color);
      }
    }
  }
  
  &__limit {
    position: absolute;
    right: 24rpx;
    bottom: 24rpx;
    font-size: 24rpx;
    color: var(--fu-text-color-secondary);
  }
}
</style> 